<template>
  <div class="container">
    <div style="">
      <div class="content_box">
        <div style="width: 47%;">
          <p>影像学检查服务前</p>
          <div
            class="card_content"
            v-if="archiveFirst.extremityVesselCta !== null && archiveFirst.extremityVesselCta !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管CTA</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.extremityVesselCta == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveFirst.extremityVesselCta }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.extremityVesselDsa !== null && archiveFirst.extremityVesselDsa !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管DSA</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.extremityVesselDsa == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveFirst.extremityVesselDsa }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.extremityVesselMri !== null && archiveFirst.extremityVesselMri !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管MRI</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.extremityVesselMri == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveFirst.extremityVesselMri }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveFirst.extremityVesselBi !== null && archiveFirst.extremityVesselBi !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管B超</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.extremityVesselBi == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveFirst.extremityVesselBi }}</span
                >
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.footXray !== null && archiveFirst.footXray !== '——'">
            <div>
              <span style="font-size: 16px;color: #000;">足X射线</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.footXray == '正常' ? '#01CD9C' : 'red'" /><span style="font-size:12px">{{
                  archiveFirst.footXray
                }}</span>
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveFirst.other !== null && archiveFirst.other !== '——'">
            <div>
              <span style="font-size: 16px;color: #000;">其他信息</span>
              <div style="float:right">
                <a-badge :color="archiveFirst.other == '正常' ? '#01CD9C' : 'red'" /><span style="font-size:12px">{{
                  archiveFirst.other
                }}</span>
              </div>
            </div>
          </div>
        </div>
        <div style="width: 47%;">
          <p>影像学检查服务后</p>
          <div
            class="card_content"
            v-if="archiveSummary.extremityVesselCta !== null && archiveSummary.extremityVesselCta !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管CTA</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.extremityVesselCta == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveSummary.extremityVesselCta }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.extremityVesselDsa !== null && archiveSummary.extremityVesselDsa !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管DSA</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.extremityVesselDsa == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveSummary.extremityVesselDsa }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.extremityVesselMri !== null && archiveSummary.extremityVesselMri !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管MRI</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.extremityVesselMri == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveSummary.extremityVesselMri }}</span
                >
              </div>
            </div>
          </div>
          <div
            class="card_content"
            v-if="archiveSummary.extremityVesselBi !== null && archiveSummary.extremityVesselBi !== '——'"
          >
            <div>
              <span style="font-size: 16px;color: #000;">下肢血管B超</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.extremityVesselBi == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveSummary.extremityVesselBi }}</span
                >
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.footXray !== null && archiveSummary.footXray !== '——'">
            <div>
              <span style="font-size: 16px;color: #000;">足X射线</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.footXray == '正常' ? '#01CD9C' : 'red'" /><span
                  style="font-size:12px"
                  >{{ archiveSummary.footXray }}</span
                >
              </div>
            </div>
          </div>
          <div class="card_content" v-if="archiveSummary.other !== null && archiveSummary.other !== '——'">
            <div>
              <span style="font-size: 16px;color: #000;">其他信息</span>
              <div style="float:right">
                <a-badge :color="archiveSummary.other == '正常' ? '#01CD9C' : 'red'" /><span style="font-size:12px">{{
                  archiveSummary.other
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Iconography',
  props: ['archiveFirst', 'archiveSummary'],
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>

<style lang="less" scoped>
// /deep/ .ant-descriptions-item-label {
//   width: 25% !important;
// }
// /deep/ .ant-descriptions-item-content {
//   width: 75% !important;
// }
@media print {
  .container {
    page-break-after: always;
  }
}
.container {
  padding: 50px 24px 0 24px;
}

.card_nd_title {
  margin-bottom: 30px;
  span {
    font-size: 16px;
    // padding-left: 10px;
    font-weight: bold;
    color: #000;
  }
}
.line {
  height: 6px;
  border-radius: 6px;
  // margin-left: 10px;
  background-color: #00b5d4;
  opacity: 0.3;
}
.content_box {
  display: flex;
  justify-content: space-between;
  p {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 30px;
    text-align: center;
    color: #000;
  }
}
.card_content {
  break-inside: avoid;
  // display: inline-block;
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ccc;
}
.item {
  margin-bottom: 20px;
}
</style>

